<template>
  <div>
    <div class="header">
      <span style="margin-left: 10px; text-align: right">关键字</span>
      <el-input placeholder="请输入关键字" v-model="req.keyword" style="width: 200px; margin-left: 10px"></el-input>

      <span style="text-align: right; margin-left: 10px">出差日期</span>
      <el-date-picker v-model="req.dates" type="daterange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions" style="margin-left: 10px"></el-date-picker>
      <el-button plain type="primary" style="margin-left: 34px" icon="el-icon-search" @click="getTravelPage()">
        搜索
      </el-button>
      <el-button plain type="primary" style="margin-left: 10px" size="small" @click="outputExcel">
        导出报表
      </el-button>
    </div>
    <div class="main">
      <el-table height="calc(100% - 40px)" :data="res.Items" stripe border highlight-current-row>
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column label="出差人" width="120">
          <template slot-scope="scope">
            {{ scope.row.USR_Name }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式" width="160">
          <template slot-scope="scope">
            {{ scope.row.USR_Phone }}
          </template>
        </el-table-column>
        <el-table-column label="案件号" width="200">
          <template slot-scope="scope">
            {{ scope.row.CS_No }}
          </template>
        </el-table-column>
        <el-table-column label="出差时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.CSTR_Date | formatDate }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="是否有补贴" width="100px">
            <template slot-scope="scope">
              {{ scope.row.CSTR_HasSubsidy ? '有' : '无' }}
            </template>
          </el-table-column> -->
        <el-table-column label="补贴金额" width="120">
          <template slot-scope="scope">
            {{ scope.row.CSTR_SubsidyFee }}元
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            {{ scope.row.CSTR_Remark }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button @click="toCase(scope.row.CSTR_CaseID)" type="text" size="small" icon="el-icon-search"
              title="查看案件详情">
              案件
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
      :current-page.sync="req.pageIndex" :page-size="req.pageSize" :total="res.Total" :page-sizes="[12, 18]"
      @size-change="
        (val) => {
          req.pageSize = val
          getTravelPage()
        }
      " @current-change="getTravelPage()"></el-pagination>
  </div>
</template>
<script>
import {
  getTravelPage,
} from '@/api/core/caseTravel'
import axios from 'axios'
import { baseURL, empIdName, tokenName } from '@/config'
export default {
  data: function () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      req: {
        keyword: null,
        pageIndex: 1,
        pageSize: 12,
        dates: []
      },
      res: {
        Items: [],
        Total: 0,
      },
    }
  },
  methods: {
    getTravelPage: function () {
      getTravelPage(this.req).then(({ data }) => {
        this.res = data
      })
    },
    toCase(caseId) {
      window.open(window.location.origin + '/#/caseDetail/caseInfoPage?caseId=' + caseId, '_blank')
    },
    outputExcel() {
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post('/api/Case/CaseTravel/OutputExcel', this.req, config)
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '出差记录.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getTravelPage()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: calc(100% - 160px);
}

.dialogLabel {
  margin-left: 10px;
  width: 100px;
  text-align: right;
  display: inline-block;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 220px;
  line-height: 220px;
  text-align: center;
  border-style: dashed;
  border-width: thin;
}

.avatar {
  width: 300px;
  height: 220px;
  display: block;
  border-style: dashed;
  border-width: thin;
}
</style>

<style>
.el-table .warning-row {
  background-color: oldlace;
}
</style>
